<template>
  <div class="user-dashboard">
    <div class="header">
      <h1>我的实验室预约</h1>
      <div class="user-info">
        <span>用户名: {{ userName }}</span>
        <span>当前日期: {{ currentDate }}</span>
      </div>
    </div>

    <div class="dashboard-container">
      <div class="card">
        <h3>预约概览</h3>
        <div class="overview-container">
          <div class="overview-item">
            <div class="overview-icon success"></div>
            <div class="overview-text">成功预约: {{ bookingOverview.success }}</div>
          </div>
          <div class="overview-item">
            <div class="overview-icon pending"></div>
            <div class="overview-text">待审核: {{ bookingOverview.pending }}</div>
          </div>
          <div class="overview-item">
            <div class="overview-icon cancelled"></div>
            <div class="overview-text">已取消: {{ bookingOverview.cancelled }}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <h3>实验室可用性</h3>
        <div class="availability-container">
          <div class="availability-item">
            <div class="availability-icon available"></div>
            <div class="availability-text">可用实验室: {{ availability.available }}</div>
          </div>
          <div class="availability-item">
            <div class="availability-icon occupied"></div>
            <div class="availability-text">已预约: {{ availability.occupied }}</div>
          </div>
          <div class="availability-item">
            <div class="availability-icon maintenance"></div>
            <div class="availability-text">维护中: {{ availability.maintenance }}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <h3>预约历史</h3>
        <div class="booking-history">
          <div class="history-item" v-for="(booking, index) in bookingHistory" :key="index">
            <div class="history-date">{{ booking.date }}</div>
            <div class="history-lab">{{ booking.labName }}</div>
            <div class="history-status">{{ booking.status }}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <h3>实验室设备使用情况</h3>
        <div ref="equipmentUsageChart" class="chart"></div>
      </div>

      <div class="card">
        <h3>实验室使用趋势</h3>
        <div ref="labUsageTrendChart" class="chart"></div>
      </div>

      <div class="card">
        <h3>快速预约</h3>
        <div class="quick-booking">
          <div class="lab-card" v-for="(lab, index) in labs" :key="index">
            <div class="lab-name">{{ lab.name }}</div>
            <div class="lab-status">
              <el-tag :type="lab.status === 'available' ? 'success' : lab.status === 'occupied' ? 'warning' : 'info'">
                {{ lab.status === 'available' ? '可用' : lab.status === 'occupied' ? '已预约' : '维护中' }}
              </el-tag>
            </div>
            <div class="lab-capacity">容量: {{ lab.capacity }}</div>
            <div class="lab-equipment">设备: {{ lab.equipment }}</div>
            <el-button type="primary" @click="quickBook(lab.name)" :disabled="lab.status !== 'available'">
              {{ lab.status === 'available' ? '立即预约' : '不可预约' }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      userName: '张三',
      currentDate: '',
      bookingOverview: {
        success: 3,
        pending: 1,
        cancelled: 0,
      },
      availability: {
        available: 2,
        occupied: 3,
        maintenance: 1,
      },
      bookingHistory: [
        {date: '2023-10-10', labName: '实验室B', status: '已确认'},
        {date: '2023-10-05', labName: '实验室A', status: '已确认'},
        {date: '2023-09-28', labName: '实验室C', status: '已取消'},
      ],
      labs: [
        {name: '实验室A', status: 'available', capacity: '30人', equipment: '显微镜、离心机'},
        {name: '实验室B', status: 'occupied', capacity: '25人', equipment: 'PCR仪、培养箱'},
        {name: '实验室C', status: 'available', capacity: '20人', equipment: '光谱仪、色谱仪'},
        {name: '实验室D', status: 'maintenance', capacity: '40人', equipment: '冷冻机、干燥箱'},
      ],
      equipmentUsageChart: null,
      labUsageTrendChart: null,
    };
  },
  mounted() {
    this.currentDate = new Date().toLocaleDateString();
    this.initCharts();
    this.fetchData();
  },
  beforeDestroy() {
    this.equipmentUsageChart.dispose();
    this.labUsageTrendChart.dispose();
  },
  methods: {
    initCharts() {
      this.equipmentUsageChart = echarts.init(this.$refs.equipmentUsageChart);
      this.labUsageTrendChart = echarts.init(this.$refs.labUsageTrendChart);

      window.addEventListener('resize', this.resizeCharts);
    },
    resizeCharts() {
      this.equipmentUsageChart.resize();
      this.labUsageTrendChart.resize();
    },
    fetchData() {
      this.updateEquipmentUsageChart();
      this.updateLabUsageTrendChart();
    },
    updateEquipmentUsageChart() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 10,
        },
        series: [
          {
            name: '设备使用情况',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              {value: 40, name: '显微镜'},
              {value: 30, name: '离心机'},
              {value: 20, name: 'PCR仪'},
              {value: 10, name: '其他'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      this.equipmentUsageChart.setOption(option);
    },
    updateLabUsageTrendChart() {
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
          name: '使用率 (%)',
        },
        series: [
          {
            name: '实验室A',
            type: 'line',
            data: [80, 90, 70, 85, 95, 60, 50],
          },
          {
            name: '实验室B',
            type: 'line',
            data: [70, 80, 60, 75, 85, 50, 40],
          },
        ],
        legend: {
          data: ['实验室A', '实验室B'],
        },
      };
      this.labUsageTrendChart.setOption(option);
    },
    quickBook(labName) {
      this.$router.push(`/student/lab`);
    },
  },
};
</script>

<style scoped>
.user-dashboard {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  gap: 20px;
}

.dashboard-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.overview-container, .availability-container {
  display: flex;
  gap: 20px;
}

.overview-item, .availability-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overview-icon, .availability-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.overview-icon.success {
  background-color: #52c41a;
}

.overview-icon.pending {
  background-color: #faad14;
}

.overview-icon.cancelled {
  background-color: #f5222d;
}

.availability-icon.available {
  background-color: #52c41a;
}

.availability-icon.occupied {
  background-color: #faad14;
}

.availability-icon.maintenance {
  background-color: #722ed1;
}

.booking-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.quick-booking {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.lab-card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lab-name {
  font-weight: bold;
  font-size: 18px;
}

.lab-status {
  display: flex;
  justify-content: flex-end;
}

.lab-capacity, .lab-equipment {
  font-size: 14px;
  color: #666;
}

.chart {
  height: 300px;
  width: 100%;
}
</style>
